<template>
  <main>
    <div>
      <label for=""> <input type="checkbox" v-model="isCheckAll" /></label>
      <span
        ><span>已完成{{ count }}</span> / 全部 {{ todos.length }}
      </span>
      <button @click="deleteSelected">清除已完成任务</button>
    </div>
  </main>
</template>

<script>
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'Footer',
  props: ['todos', 'updateAllTodo', 'deleteSelected'],
  setup(props) {
    const count = computed({
      set() {},
      get() {
        return props.todos.reduce((prev, cur) => {
          console.log(cur.isCompleted);
          return prev + (cur.isCompleted ? 1 : 0);
        }, 0);
      },
    });
    const isCheckAll = computed({
      set(val) {
        props.updateAllTodo(val);
      },
      get() {
        return count.value > 0 && count.value === props.todos.length;
      },
    });
    return { count, isCheckAll };
  },
});
</script>

<style>
main {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
</style>
